<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods/purCompanyList'}">供应商管理</el-breadcrumb-item>
				<el-breadcrumb-item>新增供应商</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="wrap companyWrap" ref="companyWrap">
			<el-form :model="PurCompanyData" :rules="vue_rule_rules" ref="dataForm" label-width="100px" class="formFontSizeMini scroll">
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="title">供应商信息</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="名称" prop="companyName">
							<el-input v-model="PurCompanyData.companyName"></el-input>
						</el-form-item>
					</el-col>
					<!--  隐藏编码
						<el-col :span="12">
							<el-form-item label="供应商编码">
								<el-input :disabled="true"></el-input>
							</el-form-item>
						</el-col>
					-->
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="区域">
							<el-cascader
								class="selectWidth"
								popper-class="kael"
								:options="vue_area_valueArr"
								@change="vue_areaChange"
								v-model="PurCompanyData.areaCode"
								:clearable="true"
								:change-on-select="true"
								:props="vue_area_props">
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="详细地址">
							<el-input v-model="PurCompanyData.companyAddress"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="状态" prop="dataBillstate">
							<el-radio-group v-model="PurCompanyData.dataBillstate">
								<el-radio v-for="(item,index) in vue_dataBillstate_listAll" class="radio" :label="item.value">{{item.label}}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="title">个人信息</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="姓名" prop="companyContactName">
							<el-input v-model="PurCompanyData.companyContactName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机/电话" prop="companyContactPhone">
							<el-input v-model="PurCompanyData.companyContactPhone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="职位">
							<el-input v-model="PurCompanyData.companyContactJob"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="Email" prop="companyContactEmail">
							<el-input v-model="PurCompanyData.companyContactEmail"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名片">
               <div class="persZh">
              <div class="shenfen">
                <el-upload
                  class="avatar-shenfen-uploader avatar-uploader"
                  :action="uploadUrl"
                  :data="certificateImg3.updata"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess3"
                  :on-error="handleAvatarError3"
                  :before-upload="beforeAvatarUpload3">
                  <img v-if="certificateImg3.isImgSrc" :src="certificateImg3.imgSrc" class="avatar">
                  <i class="avatar-uploader-icon el-icon-plus"  v-else></i>
                </el-upload>
              </div>
            </div>
            </el-form-item>
          </el-col>
        </el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="title">财务信息</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="开户名称">
							<el-input v-model="PurCompanyData.extStr1"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="开户银行">
							<el-input v-model="PurCompanyData.extStr2"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="银行账号" prop="extStr3">
							<el-input v-model="PurCompanyData.extStr3"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票抬头">
							<el-input v-model="PurCompanyData.extStr4"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="title">其他信息</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="备注">
							<el-input type="textarea" v-model="PurCompanyData.companyRemark"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="btnBox" :class="{btnBox1:!$store.state.headFold}">
			<el-button type="primary" :disabled="clickBtn" @click="save('dataForm')">保存</el-button>
			<el-button @click="vue_cancel">取消</el-button>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import * as companyMsgDatas from '../../../assets/data/companyMsgData';
	export default {
		data() {
			var mobileRule = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('手机/电话不能为空'));
				}
				if(/^(13[0-9]|14[57]|15[012356789]|177|18[012356789])\d{8}$/.test(value) || /^([0-9])\d{7}$/.test(value)) {
					callback();
				} else {
					callback(new Error('手机/电话号码格式不正确'));
				}
			};
			var operatorEmailRule = (rule, value, callback) => {
				if (!value) {
					callback();
				}
				if(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
					callback();
				}else{
					return callback(new Error('Email格式不正确'));
				}
			};
			var extStr3Rule = (rule, value, callback) => {
				if(/^[0-9]*$/g.test(value)) {
					callback();
				}else{
					return callback(new Error('银行账号必须为数字'));
				}
			};
			return {
        uploadUrl:"/v3/misc/common/uploadFile",
        certificateImg3:{
          updata:{
            "moduleName":"basic",
            "fileName":"",
          },
          imgSrc:"",
          isImgSrc:false,
          uploading:false,
          canUpload:true
        },
				clickBtn:false,                 //请求数据后禁用按钮
				vue_area_props:{  //区域组件的属性
					value: 'treeCode',
					children: 'children',
					label: 'treeName',
				},
				vue_area_valueArr:[],  //区域data
				vue_dataBillstate_listAll:[],  //状态data
				vue_rule_rules:{  //验证规则
		          companyName: [{ required: true,min:0,max:30, message: '名称不能大于30个字符', trigger: 'change' },{ required: true, message: '名称不能为空', trigger: 'blur' }],
		          dataBillstate: [{ required: true, message: '状态不能为空', trigger: 'change' }],
		          companyContactName: [{ required: true,min:0,max:30, message: '姓名不能大于30个字符', trigger: 'change' },{ required: true, message: '姓名不能为空', trigger: 'blur' }],
		          companyContactPhone: [{ required: true, validator:mobileRule, trigger: 'blur' }],
		          companyContactEmail: [{ validator:operatorEmailRule, trigger: 'blur' }],
		          extStr3: [{ validator:extStr3Rule,trigger: 'blur' }],
		        },
				PurCompanyData :{
					companyName :"",  //供应商名称
					areaCode :[],  //所属地区代码
					areaName :"",  //所属地区名称
					companyAddress :"",  //供应商所在详细地址，如街道等
					dataBillstate :"0",  //供应商状态
					companyContactName :"",  //联系人名称
					companyContactPhone :"",  //联系人电话
					companyContactJob :"",  //联系人职位
					companyContactEmail :"",  //联系人邮箱
					extStr1 :"",  //开户名称
					extStr2 :"",  //开户银行
					extStr3 :"",  //开户账号
					extStr4 :"",  //发票抬头
					companyRemark :"",  //备注
				},
			}
		},
		methods: {
      //-------------------*start 上传名片 * --------------------------
      handleAvatarSuccess3(res, file , fileList) {
        this.certificateImg3.uploading = false;
        this.certificateImg3.canUpload = true;
        this.certificateImg3.isImgSrc = true;
        this.certificateImg3.imgSrc = res;
      },
      handleAvatarError3(err, file , fileList){
        this.certificateImg3.uploading = false;
        this.certificateImg3.isImgSrc = true;
        this.certificateImg3.dialogVisible = !!this.certificateImg3.imgSrc;
        this.Public.openError(this,"上传失败");
      },
      beforeAvatarUpload3(file) {
        this.certificateImg3.uploading = true;
        this.certificateImg3.canUpload = false;
        this.certificateImg3.isImgSrc = false;
        this.certificateImg3.updata.fileName = file.name;

        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.certificateImg3.uploading = false;
          this.certificateImg3.canUpload = true;
          this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
        }
        if(!isLt2M) {
          this.certificateImg3.uploading = false;
          this.certificateImg3.canUpload = true;
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isPNG || isJPG) && isLt2M;
      },
//-------------------*end 上传名片 * --------------------------


			query_areaDataArr(){  //获取地区data
				this.vue_area_valueArr = companyMsgDatas.areaData;
			},
			query_dataBillstate_listAll(){  //获取状态data
				this.vue_dataBillstate_listAll=[
					{label:"启用",value:"0"},
					{label:"禁用",value:"1"},
				]
			},
			vue_areaChange(val){
				switch(val.length){
					case 1:
						this.vue_area_valueArr.forEach((item,index,arr)=>{
							if(val[0] == item.treeCode){
								this.PurCompanyData.areaName=item.treeName;
								return;
							}
						});
						break;
					case 2:
						this.vue_area_valueArr.forEach((item,index,arr)=>{
							if(val[0] == item.treeCode){
								this.PurCompanyData.areaName=item.treeName;
								item.children.forEach((item1,index2,arr2)=>{
									if(val[1]==item1.treeCode){
										this.PurCompanyData.areaName+="/"+item1.treeName;
									}
								})
							}
						});
						break;
					case 3:
						this.vue_area_valueArr.forEach((item,index,arr)=>{
							if(val[0] == item.treeCode){
								this.PurCompanyData.areaName=item.treeName;
								item.children.forEach((item1,index1,arr1)=>{
									if(val[1]==item1.treeCode){
										this.PurCompanyData.areaName+="/"+item1.treeName;
										item1.children.forEach((item2,index2,arr2)=>{
											if(val[2]==item2.treeCode){
												this.PurCompanyData.areaName+="/"+item2.treeName;
											}
										})
									}
								})
							}
						});
						break;
					case 4:
						this.vue_area_valueArr.forEach((item,index,arr)=>{
							if(val[0] == item.treeCode){
								this.PurCompanyData.areaName=item.treeName;
								item.children.forEach((item1,index1,arr1)=>{
									if(val[1]==item1.treeCode){
										this.PurCompanyData.areaName+="/"+item1.treeName;
										item1.children.forEach((item2,index2,arr2)=>{
											if(val[2]==item2.treeCode){
												this.PurCompanyData.areaName+="/"+item2.treeName;
												item2.children.forEach((item3,index3,arr3)=>{
													if(val[3]==item3.treeCode){
														this.PurCompanyData.areaName+="/"+item3.treeName;
													}
												})
											}
										})
									}
								})
							}
						});
						break;
				}
			},
			vue_cancel() {
				this.$router.go(-1)
			},
			save(formName) {
				this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	this.clickBtn=!this.clickBtn;
		          	this.axios({
					method:"POST",
					url:"/v3/pur/companys",
					data:{
						"companyName":this.PurCompanyData.companyName,
						"areaCode":JSON.stringify(this.PurCompanyData.areaCode),
						"areaName":this.PurCompanyData.areaName,
						"companyAddress":this.PurCompanyData.companyAddress,
						"dataBillstate":this.PurCompanyData.dataBillstate,
						"companyContactName":this.PurCompanyData.companyContactName,
						"companyContactPhone":this.PurCompanyData.companyContactPhone,
						"companyContactJob":this.PurCompanyData.companyContactJob,
						"companyContactEmail":this.PurCompanyData.companyContactEmail,
            "companyBussinesscardUrl":this.certificateImg3.imgSrc,
						"extStr1":this.PurCompanyData.extStr1,
						"extStr2":this.PurCompanyData.extStr2,
						"extStr3":this.PurCompanyData.extStr3,
						"extStr4":this.PurCompanyData.extStr4,
						"companyRemark":this.PurCompanyData.companyRemark,
					}
				}).then((res)=>{
					this.clickBtn=!this.clickBtn;
					this.Public.openSuccess(this,"操作成功！");
					this.$router.push({path:"/goods/purCompanyList"})
				}).catch((err)=>{
					this.clickBtn=!this.clickBtn;
					this.Public.openError(this,err.response.data);
				})
		          } else {
		            return false;
		          }
		        });


			},
		},
		created() {
			this.query_areaDataArr();  //请求地区data
			this.query_dataBillstate_listAll();  //请求状态data
		},
		mounted() {
			this.$refs.companyWrap.style.height = (document.documentElement.clientHeight - 180) + 'px';
			this.$refs['dataForm'].$el.style.height = (document.documentElement.clientHeight - 170) + 'px';

		}
	}
</script>

<style scoped>

  .avatar-uploader {
    display: inline;
  }
  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader.uploading .el-upload{
    border: 1px dashed #d9d9d9;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }
  .uploading .avatar-uploader-icon{
    border-color: transparent;
  }
  .avatar {
    width: 110px;
    height: 110px;
    display: block;
    border-radius: 6px;
  }

  .avatar-shenfen-uploader .avatar {
    width: 220px;
    height: 125px;
    display: block;
  }

  .perSpan{
    float: left;
  }

  .shenfen{
    width: 350px;
    float: left;
  }

  .persZh{
    clear: both;
    margin-left: 10px;
    margin-top: 20px;
    height: 128px;
  }

	*{
		transition:.2s;
	}
	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
    padding: 3px 0 15px 0;
	}

	div.wrap {
		position: relative;
		flex: 1;
		width: 100%;
		padding: 15px 20px 0 20px;
		box-sizing: border-box;
		background: #fff;
	}

	.scroll {
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 10px;
	}

	.title {
		height: 50px;
		color: #03B8CC;
		font-size: 16px;
	}

	.selectWidth {
		width: 100%;
	}

	.btnBox {
		position: absolute;
		bottom: 10px;
		left:180px;
		height: 50px;
		background: #fff;
		z-index: 100;
	}
	.btnBox1 {
		left:98px;
	}
	/* start upload */
	.avatar-uploader {
	    position: relative;
		/*border: 1px dashed #d9d9d9;*/
	    border-radius: 6px;
	    cursor: pointer;
	    overflow: hidden;
	    z-index: 9;
	}
	.avatar-uploader:hover {
		border-color: #03B8CC;
	}
	.avatar-uploader-icon {
		font-size: 20px;
		color: #8c939d;
		width: 95px;
		height: 95px;
		line-height: 95px;
		text-align: center;
	}
	.avatar-uploader .g-core-image-upload-form {
	    width: 100% !important;
	    height: 100% !important;
	    cursor: pointer;
	}
	.avatar-uploader .g-core-image-upload-form>input {
	    position: relative;
	    top: -4px;
	    cursor: pointer;
	}
	.crop-box .g-resize {
		background-color: red !important;
	}
	/* end upload */
</style>
